@import "../variables/default.scss";
@import "../mixins/index.scss";

$at-list-item-horizontal-padding: 24px;

@mixin squareImg($size: 56px) {
  width: $size;
  height: $size;

  &__info {
    width: 100%;
    height: 100%;
  }
}

.at-list {
  display: flex;
  flex-direction: column;
  background-color: $color-bg;

  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: $color-border-light;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: $color-border-light;

  &__item {
    padding-left: $spacing-h-lg;
    padding-right: $spacing-h-lg;
    position: relative;
    box-sizing: border-box;
    color: $at-list-text-color;
    font-size: $font-size-lg;
    line-height: $line-height-zh * $font-size-lg;
    @include active;

    &-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: $color-border-light;
      padding-top: $spacing-v-lg;
      padding-bottom: $spacing-v-lg;
    }

    &-icon {
      margin-right: $at-list-item-horizontal-padding;
    }

    &-thumb {
      margin-right: $at-list-item-horizontal-padding;
      @include squareImg($at-list-thumb-size);
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      &__image {
        width: 100%;
        height: 100%;
      }
    }

    &--disabled {
      .at-list__item-container {
        opacity: $opacity-disabled;
      }

      &:active {
        background-color: transparent !important;
      }
    }

    &--no-border::after {
      content: initial;
      border: 0;
    }

    &-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding-right: 40px;

      &__title {
        @include line(1);
        text-overflow: ellipsis;
        color: $at-list-text-color;
        font-size: $font-size-lg;
        line-height: $line-height-zh * $font-size-lg;
        //color: inherit;
        //font-size: inherit;
        //line-height: $line-height-zh;
      }

      &__note {
        color: $at-list-content-color;
        font-size: $font-size-base;
        line-height: $line-height-zh * $font-size-base;
      }
    }

    &-extra {
      // @include flex(0, 0, $at-list-extra-width);
      //position: relative;
      max-width: $at-list-extra-width;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;

      &__info,
      &__icon,
      &__image,
      &__switch {
        //display: inline-block;
      }

      &__info {
        @include line(1);
        max-width: 100%;
        color: $at-list-extra-color;
        //padding-right: 30px;
        font-size: $font-size-lg;
        vertical-align: middle;
        box-sizing: border-box;
      }

      // &__icon {
      //   margin-right: -12px;

      //   &-arrow {
      //     color: $at-list-arrow-color;
      //     font-size: 48px;
      //   }
      // }

      &__icon {
      }

      &__switch {
        vertical-align: middle;
      }

      &__image {
        @include squareImg($at-list-thumb-size);

        vertical-align: middle;
        margin-right: 30px;

        &-info {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  /* modifiers */
  &--no-border {
    border-top-width: 0;
    border-bottom-width: 0;
    &::after,
    &::before {
      content: initial;
      border: 0;
    }
  }
}
